<template>
  <div class="app-container clearfix">
      <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
     {{brokerData.title}}
  </el-form-item>
  <el-form-item label="活动区域">
    {{brokerData.fullname}}
  </el-form-item>
  <el-form-item label="活动时间">
    {{brokerData.content}}
  </el-form-item>
  <el-form-item>
    <el-button @click="handleBrokerBack()">取消</el-button>
  </el-form-item>
</el-form>
     
      
      
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {getBrokerDetail} from '@/api/position/broker' 

export default {
  name: 'financeDashboard',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      
      socket:"",
      tableKey: 0,
      brokerlist: [],
      kbarChart:null,
      brokerData:{},
      total: 0,
      listLoading: false,
      connected:"loading",
      filterForm: {
        brokerID: 1
      }
    }
  },
  mounted(){
  },
  created() {
      console.log('参数',this.$route.query)
      this.filterForm.brokerID = this.$route.query.brokerID
    this.getList()
  },
  destroyed(){
  },
  methods: {
    getList:function(){
      let _this = this
      getBrokerDetail(_this.filterForm).then(res=>{
        if(res.status == 200){
          console.log(res.data)
          _this.brokerData = res.data;
        }
      });
    },
    handleBrokerBack:function(){
        this.$router.push({ path: 'main'})
    },
    handleFilter() {
      this.filterForm.page = 1
      this.getList()
    },
    /*数据点来自于百度Echarts官方示例库
    * 每个数据点意义：[日期，开盘(open)，收盘(close)，最低(lowest)，最高(highest)]
    * 例如： ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],
    */

    /**
    * 绘制数据
    */
    drawData:function(options) {
        let data = options.data;
        let xLength = options.chartZone[2] - options.chartZone[0];
        let c;//记录当前绘制点的颜色
        let gap = xLength / options.xAxisLabel.length;
        let activeX =  0;//记录绘制过程中当前点的坐标
        let activeY =  0;//记录绘制过程中当前点的y坐标
        context.strokeWidth = 2;
        context.beginPath();
        context.moveTo(options.chartZone[0],options.chartZone[3]);//先将起点移动至0,0坐标
        for(let i = 0; i < data.length; i++){
            //获取绘图颜色
            c = getColor(data[i]);
            context.strokeWidth = 1;
            context.strokeStyle = context.fillStyle = c;
            //计算绘制中心点x坐标
            activeX = options.chartZone[0] + (i + 1) * gap;
            //绘制最高最低线;
            context.beginPath();
            context.moveTo(activeX,transCoord(data[i][3]));
            context.lineTo(activeX,transCoord(data[i][4]));
            context.closePath();
            context.stroke();
            //绘制开盘收盘矩形
            if (data[i][0] >= data[i][5]) {   
              context.fillRect(activeX - 5 , transCoord(data[i][0]) , 10, transCoord(data[i][6]) - transCoord(data[i][0]));
            } else{
              context.fillRect(activeX - 5 , transCoord(data[i][7]) , 10, transCoord(data[i][0]) - transCoord(data[i][8]));
            }
        }
        },

    //根据K线图的数据中开盘价和收盘价计算绘图颜色
    getColor:function(data) {
        return data[0] >= data[1] ? '#1abc9c' : '#DA5961';
    },

    //从可视坐标系坐标转换为canvas坐标系坐标
    transCoord:function(coord) {
        return options.chartZone[3] - (options.chartZone[3] - options.chartZone[1])*(coord - options.yMin) / (options.yMax - options.yMin);
    }
  }
}
</script>
<style>
.filter { float: left; width: 200px; min-height: 600px; }
.broker { float: left; width: 800px; }
.broker-item { float: left; width: 200px; height: 200px; margin-right: 25px; }
.broker-item-icon { width:200px; height:150px; }
.broker-item-icon img { width:100%; height:100%; border-radius: 10px; }
</style>